<template>
  <el-container style="height: 100vh;">
    <!-- 页面内容 -->
    <el-main class="main-content">
      <div class="post-form-container">
        <!-- 帖子标题输入框 -->
        <el-input
          v-model="postTitle"
          placeholder="请输入帖子标题"
          class="post-title-input"
        ></el-input>

        <!-- 帖子内容输入框 -->
        <el-input
          v-model="postContent"
          type="textarea"
          placeholder="请输入帖子内容"
          rows="6"
          class="post-content-input"
        ></el-input>

        <!-- 上传图片或视频 -->
        <el-upload
          class="upload-demo"
          drag
          action=""
          multiple
          :on-preview="handlePreview"
          :on-remove="handleRemove"
          :file-list="fileList"
          :auto-upload="false" 
          list-type="picture-card"
          :before-upload="storeMediaLocally" 
          accept="image/*, video/*"  
        >
          <i class="el-icon-plus"></i>
          <div slot="tip" class="el-upload__tip">点击或拖拽上传图片或视频</div>
        </el-upload>

        <!-- 图片预览模态框 -->
        <el-dialog v-if="previewType === 'image'" :visible.sync="dialogVisible">
          <img width="100%" :src="dialogMediaUrl" alt="图片预览" />
        </el-dialog>

        <!-- 视频预览模态框 -->
        <el-dialog v-if="previewType === 'video'" :visible.sync="dialogVisible">
          <video width="100%" controls :src="dialogMediaUrl"></video>
        </el-dialog>

        <!-- 发布按钮 -->
        <el-button type="primary" @click="submitPost" class="submit-btn">
          发布帖子
        </el-button>
      </div>
    </el-main>

    <!-- 底部返回按钮 -->
    <div class="floating-btn" @click="openPostForm"> &lt; </div>
  </el-container>
</template>




  
<script setup>
import { ref } from 'vue';
import { useRouter } from 'vue-router';
import { ElButton, ElInput, ElUpload, ElDialog } from 'element-plus';

const router = useRouter();

const postTitle = ref('');
const postContent = ref('');
const fileList = ref([]);  // 存储上传的文件（图片或视频）
const dialogMediaUrl = ref('');  // 媒体预览的 URL
const dialogVisible = ref(false);  // 控制模态框是否显示
const previewType = ref('');  // 预览类型（图片或视频）

// 预览图片或视频
const handlePreview = (file) => {
  if (file.type.startsWith('image')) {
    previewType.value = 'image';
  } else if (file.type.startsWith('video')) {
    previewType.value = 'video';
  }
  dialogMediaUrl.value = file.url || file.raw.url;
  dialogVisible.value = true;
};

// 删除图片或视频
const handleRemove = (file, fileList) => {
  console.log('Removing file:', file, fileList);
};

// 本地存储图片或视频
const storeMediaLocally = (file) => {
  const reader = new FileReader();
  reader.onload = (e) => {
    file.url = e.target.result;  // 将媒体 URL 设置为本地加载的媒体
    fileList.value.push(file);  // 将文件添加到 fileList
  };
  reader.readAsDataURL(file);  // 读取文件并将其转换为 DataURL 格式
  return false;  // 防止自动上传
};

// 提交帖子
const submitPost = () => {
  if (postTitle.value && postContent.value) {
    // 可以在此处添加将数据发送到后端的逻辑，包括 fileList 中的图片和视频
    alert(`发布了标题为：${postTitle.value} 的帖子`);
    postTitle.value = '';
    postContent.value = '';
    fileList.value = [];  // 清空文件列表
  } else {
    alert('请输入完整的帖子标题和内容');
  }
};

const openPostForm = () => {
  router.push({ name: 'SharePage' });
};
</script>

  
<style scoped>
.post-form-container {
  max-width: 600px;
  margin: 50px auto;
  padding: 20px;
  background-color: #fff;
  border-radius: 10px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}

.post-title-input,
.post-content-input {
  margin-bottom: 20px;
}

.submit-btn {
  display: block;
  width: 100%;
  margin-top: 10px;
}

/* 上传区域的样式 */
.upload-demo {
  margin-bottom: 20px;
}

.floating-btn {
  position: fixed;
  bottom: 55px;
  left: 50%;
  transform: translateX(-50%);
  width: 60px;
  height: 60px;
  background-color: #409eff;
  color: #fff;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 30px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
  cursor: pointer;
  z-index: 10;
}

.floating-btn:hover {
  background-color: #66b1ff;
}
</style>
